<template>
	<view class="list-details app-pages">
		<view class="tabs">
			<u-tabs :list="list1" @change="handleChange"></u-tabs>
			<view class="sort">
				<view class="">最新</view>
				<view class="">销量</view>
				<view class="">价格</view>
			</view>
		</view>
		
		<view class="list">
			<view class="list-item" v-for="item in 10 " :key="item" @click="handleRouter('/homePages/dressUp/goodsDetails')">
				<u--image showLoading="true" 
				src="https://cdn.uviewui.com/uview/swiper/swiper1.png"
				 width="330rpx" height="240rpx"></u--image>
				<view class="cell">
					 <view class="cell-tips1">
					    <text>古装A64</text>
					 	<text>白衬红色</text>
					 </view>            
					 <view class="cell-tips2">
					 	<text style="font-size: 24rpx;">
							￥<text class="red">58</text>元/日
						</text>
						<view class="btn">加入购物车</view>
					 </view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				tabsVal: '',
				list1: [{
					name: '关注',
				}, {
					name: '推荐',
				}, {
					name: '电影'
				}, {
					name: '科技'
				}, {
					name: '音乐'
				}, {
					name: '美食'
				}, {
					name: '文化'
				}, {
					name: '财经'
				}, {
					name: '手工'
				}]
			}
		},
		methods: {
			handleRouter(url){
				uni.navigateTo({
					url
				})
			},
			handleChange(options) {
				this.tabsVal = options
			}
		}
	}
</script>
<style lang="scss" scope>
	.list{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.list-item{
			padding-bottom: 20rpx;
			.cell-tips1{
				display: flex;
				justify-content: space-between;
				margin: 20rpx 0;
			}
			.cell-tips2{
				display: flex;
				justify-content: space-between;
				.red{
					color: red;
					font-size: 32rpx;
				}
				.btn{
					padding: 4rpx 10rpx;
					border-radius: 8rpx;
					background-color: red;
					font-size: 26rpx;
					color: white;
				}
			}
		}
	}
	.sort {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 20rpx 0;
	}

	.list-details {}
</style>
